<style lang="scss" scoped>
    .c3{line-height: 32px;font-size: 15px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
    .c3 .layui-badge{margin-right: 10px;}
    .c4{text-align: center;padding: 50px 0;font-size: 16px;color: #888;}
    .c4 .iconfont{font-size: 88px;color: #888;}
    .c4 span{color: #006A90;}
    .c5{margin-bottom: 30px;}
    .c6{display: inline-block;width: 30px;text-align: center;}
</style>

<template>
	<el-drawer v-model="pData.display" direction="rtl" size="50%">
		<template #title>
            <div>
                <el-input
                style="width:50%"
                v-model="pData.keyword"
                placeholder="请输入需要搜索的关键词">
                <template #append>
                  <el-button :icon="Search" @click="search"/>
                </template>
              </el-input>
            </div>
		</template>
        <div>
            <div class="c3" v-for="(v,index) in pData.list" :key="index">
                <a :href="v.url"  v-if="v.type == 'tool'" target="_blank">
                    <span class="c6">{{index+1}}、</span>
                    <span class="layui-badge layui-bg-green">软件</span> {{v.title}}
                </a>
                <a :href="config.baseUrl+'index/index/notes_content?id='+v.id"  target="_blank" v-if="v.type == 'note'">
                    <span class="c6">{{index+1}}、</span>
                    <span class="layui-badge layui-bg-orange">笔记</span> {{v.title}} 
                </a>
                <a :href="config.baseUrl+'index/shop/goods_detail?id='+v.id"  target="_blank"  v-if="v.type == 'goods'">
                    <span class="c6">{{index+1}}、</span>
                    <span class="layui-badge">商品</span> {{v.title}}
                </a>
                <a :href="config.baseUrl+'index/index/vlog_content?id='+v.id"  target="_blank"  v-if="v.type == 'vlog'">
                    <span class="c6">{{index+1}}、</span>
                    <span class="layui-badge layui-bg-cyan">vlog</span> {{v.title}}
                </a>
                <a v-if="v.type == 'member'">
                    <span class="c6">{{index+1}}、</span>
                    <span class="layui-badge layui-bg-cyan">会员</span> {{v.title}}
                </a>
                <a  v-if="v.type == 'money'">
                    <span class="c6">{{index+1}}、</span>
                    <span class="layui-badge layui-bg-cyan">账单</span> {{v.title}}
                </a>
            </div>
            <div class="c4" v-if="pData.list.length == 0">
                <div class="c5"><i class="iconfont">&#xe708;</i></div>
                没有找到<span> {{pData.keyword}} </span>相关数据
            </div>
        </div>
	  </el-drawer>
</template>

<script setup>
    import { Search } from '@element-plus/icons-vue'
    import publicJS from "@/hook/public.js";
    const { api,config } = publicJS();

	const emit = defineEmits(['update:show','update:keyword'])
	const props = defineProps({
		show: {
			type:Boolean,
			default:false
		},
        keyword: {
			type:String,
			default:''
		}
	})

    const pData = reactive({
        display:false,
        keyword:'',
        list:[]
    })

    const search = ()=>{
        if(pData.keyword){
            api.post('a/index/search',{keyword:pData.keyword}).then(r=>{
                console.log(r)
                pData.list = r.data;
            })
        }
    }

    //深度监听父元素组件
	watch(props,(newVal,oldVal)=>{
		pData.display = newVal.show;
		pData.keyword = newVal.keyword;
        if(pData.keyword){
            api.post('a/index/search',{keyword:pData.keyword}).then(r=>{
                console.log(r)
                pData.list = r.data;
            })
        }

	},{ immediate: true })

    //监听页面中数据，赋值给父组件，达到数据同步
    watch(pData,(newVal,oldVal)=>{
		emit('update:show', newVal.display)
	},{ immediate: true })

</script>